<template>
  <van-form v-if="formConf && formList.length" :label-width="formConf.labelWidth" label-align="top">
    <div class="pho-form-item" v-for="item in list" :key="item.__config__.renderKey">
      <van-field
        :label="item.__config__.showLabel ? item.__config__.label : ''"
        input-align="right"
      >
        <template #input>
          <component :value="item.text" :is="item.comName" v-bind="item" />
        </template>
      </van-field>
    </div>
  </van-form>
</template>

<script>
import { deepClone, formateForm } from "../utils/index";
import FilesShow from "./phoneComponents/components/filesShow";
import NameShow from "./phoneComponents/components/nameShow";
import ImageShow from "./phoneComponents/components/imageShow";
import SignShow from "./show/signShow";

export default {
  name: "phoneShow",
  components: {
    FilesShow,
    NameShow,
    ImageShow,
    SignShow
  },
  props: {
    formList: {
      type: Array,
      default: () => []
    },
    formConf: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      list: []
    };
  },

  watch: {
    formList: {
      immediate: true,
      deep: true,
      handler(newValue) {
        if (newValue) {
          this.list = formateForm(this.treeToArray(this.formList)).filter(
            item => item.__config__.tag !== "form-row-container"
          );
        }
      }
    }
  },

  methods: {
    treeToArray(tree) {
      let treeData = deepClone(tree);
      let ary = [];
      treeData.forEach(item => {
        if (item.__config__.children) {
          ary.push(item);
          if (item.__config__.children.length > 0) {
            ary.push(...this.treeToArray(item.__config__.children));
          }
        } else {
          ary.push(item);
        }
      });
      return ary;
    }
  }
};
</script>

<style lang="scss"></style>
